/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-08-18 13:40:37
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-08-19 15:13:01
 * @File Name: location.js
 */

'use strict';

import React, { Component } from 'react';
import {
    View,
    Text,
    ScrollView,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';
import PickerModal from '../common/pickerModal';
import Country from '../common/country';
import State from '../common/state';

export default class Location extends Component {
    constructor(props) {
        super(props);

        if(_.isEmpty(Share.tmpLocationOptions)) {
            this.state = {
                is_distance: this.props.is_distance,
                r_country: this.props.r_country,
                match_r_state_id: this.props.match_r_state_id,
                distance: this.props.distance,
                stateCallback: true,
            };    
        } else {        
            this.state = _.clone(Share.tmpLocationOptions);
        }
        if(typeof(this.state.is_distance) == 'undefined') {
            if(typeof(this.state.r_country) != 'undefined') {
                this.state.is_distance = 0;
            } else {
                this.state.is_distance = '';
            }
        }
        if ( parseInt(this.state.is_distance) === 1 ) {
            this.state.distanceModalVisble = true;
            this.state.is_distance = 1;
        } else if (this.state.is_distance === 0 || this.state.is_distance === '0') {
            this.state.regionDomVisble = true;
            this.state.is_distance = 0;
        }
    }

    render() {
        let selectedItem = '';
        if ( this.state.is_distance === 1 ) {
            selectedItem = 1;
        } else if ( this.state.is_distance === 0 ) {
            selectedItem = 0;
        }
        return (
            <PickerModal
                     navTitle='Location'
                     modalVisible={true}
                     onPickerModalCancel = { () => {this.props.callbackCancel()} }
                     onPickerModalSave = { () => { this.callbackSave()} }
                    >
                <ScrollView style={[styles.modalBox, styles.modalMaxHeight]}>            
                    <TouchableOpacity style={styles.itemView} activeOpacity={1} onPress={() => this.setState({is_distance: '', regionDomVisble: false, distanceModalVisble: false})}>
                        <Text style={ selectedItem === '' ? [styles.itemText, styles.itemTextAction] : styles.itemText }>{ Lang.filter_anywhere }</Text>
                        { selectedItem === '' ? <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> : null } 
                    </TouchableOpacity>    
                    <TouchableOpacity style={styles.itemView} activeOpacity={1} onPress={() => this.setState({is_distance: 0, regionDomVisble: true, distanceModalVisble: false })}>
                        <Text style={  selectedItem === 0 ? [styles.itemText, styles.itemTextAction] : styles.itemText }>Region</Text>
                        { selectedItem === 0 ? <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> : null } 
                    </TouchableOpacity>    
                    <TouchableOpacity style={styles.itemView} activeOpacity={1} onPress={() => this.setState({is_distance: 1, distanceModalVisble: true, regionDomVisble: false})}>
                        <Text style={ selectedItem === 1 ? [styles.itemText, styles.itemTextAction] : styles.itemText }>Use current location</Text>
                        { selectedItem === 1 ? <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> : null } 
                    </TouchableOpacity>
                    {this.countryModal()}              
                    {this.stateModal()}              
                    {this.regionDom()}              
                    {this.distanceModal()}              
                </ScrollView>
            </PickerModal>
        )
    }

    callbackSave() {
        let data = {};
        if ( this.state.is_distance === 1 ) {
            data = {is_distance: 1, distance: this.state.distance};
        } else if ( this.state.is_distance === 0 ) {
            data = {is_distance: 0, r_country: this.state.r_country, match_r_state_id: this.state.match_r_state_id};
        } else {
            data = {is_distance: ''};
        }
        Share.tmpLocationOptions = _.clone(this.state);
        this.props.callbackSave(data);
    }

    regionDom() {
        let jsx = null, showState = false, stateData = [];
        if ( this.state.r_country && this.state.stateCallback) {
            stateData = JSON.parse(Store.local_state_list)[this.state.r_country] || [];
            if (stateData.length > 0 ) {
                showState = true; 
            }
        }
        if (this.state.regionDomVisble) {
            jsx = <View style={{marginTop: 20}}>
                    <View style={{borderBottomWidth:1, borderBottomColor:'#DEDDDD', marginLeft: 10,}}>
                        <Text style={{ color: '#999', marginBottom: 5, }}>Regin</Text>
                    </View>
                    <TouchableOpacity activeOpacity={1} onPress={() => this.setState({countryModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={ styles.left }>Country</Text>
                            <Text style={ styles.right }>{ Share.getLabel('local_country', this.state.r_country, Lang.filter_anywhere) }</Text>
                        </View>
                    </TouchableOpacity>
                    {showState ?
                    <TouchableOpacity activeOpacity={1} onPress={() => this.setState({stateModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={ styles.left }>State</Text>
                            <Text style={ styles.right }>{ Share.getStateLabel(this.state.r_country, this.state.match_r_state_id) }</Text>
                        </View>
                    </TouchableOpacity>
                    : null }
                  </View>
        }
        return jsx;
    }

    distanceModal() {
        let jsx = null;
        if (this.state.distanceModalVisble) {
          jsx = <View style={{marginTop: 20}}>
                    <View style={{borderBottomWidth:1, borderBottomColor:'#DEDDDD', marginLeft: 10,}}>
                        <Text style={{ color: '#999', marginBottom: 5, }}>(Use GPS to find matches nearby)</Text>
                        <Text style={{ color: '#999', marginBottom: 5, }}>Distance within</Text>
                    </View>
                    { this.createDistanceItems() }
                  </View>
        }
        return (jsx);
    }

    createDistanceItems() {
        let distance = this.state.distance || -1;
        let items = [], data = JSON.parse(Store.local_distance);
        for (let i in data) {
            let selected = distance == data[i].value;
            items[i] = <TouchableOpacity style={styles.itemView} activeOpacity={1} key={data[i].value} onPress={() => this.setState( {distance: data[i].value} )}>
                        <Text numberOfLines={1} style={ selected ? [styles.itemText, styles.itemTextAction] : styles.itemText }>{ data[i].label }</Text>
                        { selected ? <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> : null } 
                      </TouchableOpacity>;
        }
        return items;
    }

    countryModal() {
        let jsx = null;
        if (this.state.countryModalVisble) {
          jsx = <PickerModal
                 navTitle='Country'
                 modalVisible={this.state.countryModalVisble}
                 onPickerModalCancel = {() => this.setState({countryModalVisble: false})}
                 save={false}
                 hideShadow={true}
                >
                    <View style={[styles.modalBox, styles.modalMaxHeight]}>            
                        <Country callbackParent = { (country) => {this.setState({r_country: country, match_r_state_id: '', countryModalVisble: false, stateCallback: false}); Share.getStateList({country: country, callback: ()=> this.setState({stateCallback:true})});} } country = {this.state.r_country} />              
                    </View>
                </PickerModal>
        }
        return (jsx);
    }

    stateModal() {
        let jsx = null;
        if (this.state.stateCallback && this.state.stateModalVisble) {
          jsx = <PickerModal
                 navTitle='State'
                 modalVisible={this.state.stateModalVisble}
                 onPickerModalCancel = {() => this.setState({stateModalVisble: false})}
                 save={false}
                 hideShadow={true}
                >
                    <View style={[styles.modalBox, styles.modalMaxHeight]}>            
                        <State callbackParent = {(state) => this.setState({match_r_state_id: state, stateModalVisble: false}) }  state = {this.state.match_r_state_id || ''} country = {this.state.r_country} extraItem={true} /> 
                    </View>
                </PickerModal>
        }
        return (jsx);
    }
}

const styles = StyleSheet.create(Css.LocationStyle);